<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-15
  Time: 下午5:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            padding-top: 20px;
            background: #2aabd2;
        }
        .register{
            width: 760px;
            height: 716px;
            border-radius: 20px;
            background: aqua;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -380px;
            margin-top: -358px;
            background: rgba(0,0,0,0.3);
        }

        .register h2{
            color: #ffffff;
            display: block;
            margin-bottom: 40px;
        }

        .register .input-group{
            width: 60%;
            margin-left: 20%;
            margin-bottom: 60px;
        }

        .register .btn{
            width: 60%;
            margin-left: 20%;
            height:40px;
            margin-bottom: 40px;
        }

        .al{
            height: 60px;
            width: 200px;
            position: absolute;
            top: 20px;
            left: 46%;
            background: red;
            border-radius: 10px;
            color: white;
            text-align: center;
            align-content: center;
            font-size: 16px;
            line-height: 60px;
            display: none;
        }
    </style>
</head>
<body>

<div class="register">
    <h2 align="center">注册</h2>

    <div class="input">
        <form method="post" action="registerSubmit" accept-charset="UTF-8">
            <div class="input-group input-group-lg">
                <span class="input-group-addon" id="sizing-addon1">用户名</span>

                <c:if test="${name!=null}">
                    <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="name" value="${name}" placeholder="请输入用户名">
                </c:if>

                <c:if test="${name==null}">
                    <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="name" placeholder="请输入用户名">
                </c:if>
            </div>

            <div class="input-group input-group-lg">
                <span class="input-group-addon" id="sizing-addon2">密&nbsp;&nbsp;&nbsp;码</span>
                <c:if test="${password!=null}">
                    <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="password" value="${password}" maxlength="10" minlength="6" placeholder="密码长度位6-10位" id="password">
                </c:if>

                <c:if test="${password==null}">
                    <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="password"  maxlength="10" minlength="6" placeholder="密码长度位6-10位" id="password">
                </c:if>
            </div>

            <div class="input-group input-group-lg">
                <span class="input-group-addon" id="sizing-addon2">确认密码</span>
                <c:if test="${password!=null}">
                    <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="repassword" value="${password}" maxlength="10" minlength="6" placeholder="密码长度位6-10位" id="repassword">
                </c:if>

                <c:if test="${password==null}">
                    <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="repassword"  maxlength="10" minlength="6" placeholder="密码长度位6-10位" id="repassword">
                </c:if>
            </div>

            <div class="input-group input-group-lg">
                <span class="input-group-addon" id="sizing-addon3">邮&nbsp;&nbsp;&nbsp;箱</span>
                <c:if test="${email!=null}">
                    <input type="email" class="form-control"  aria-describedby="sizing-addon1" required="required" name="email" value="${email}" placeholder="请输入邮件地址">
                </c:if>

                <c:if test="${email==null}">
                    <input type="email" class="form-control"  aria-describedby="sizing-addon1" required="required" name="email" placeholder="请输入邮件地址">
                </c:if>

            </div>


            <button class="btn btn-success" type="button" onclick="send()" id="button">注册</button>
        </form>
    </div>
</div>

<div class="al" id="al">
    邮件发送失败
</div>

<script type="text/javascript">

    $('#repassword').bind('input propertychange',function() {
        if ($('#repassword').val()!=$('#password').val()){
            $('#repassword').css('color','red');
        }else {
            $('#repassword').css('color','black');
        }
    });

    function hiddenAl(){
        (document.getElementById("al")).style.display="none";
    }

    if (${statu=="false"}){
        (document.getElementById("al")).style.backgroundColor="red";
        (document.getElementById("al")).innerText="邮件发送失败";
        (document.getElementById("al")).style.display="block";
        setTimeout(hiddenAl,1000);
    }
    if (${error!=null}){
        (document.getElementById("al")).style.backgroundColor="red";
        (document.getElementById("al")).innerText="${error}";
        (document.getElementById("al")).style.display="block";
        setTimeout(hiddenAl,1000);
    }


    function send() {
        if ($('#repassword').val()!=$('#password').val()){
            setTimeout(hiddenAl,2000);
            (document.getElementById("al")).style.backgroundColor="red";
            (document.getElementById("al")).innerText="两次密码输入不一致";
            (document.getElementById("al")).style.display="block";
            return;
        } else {
            var button = document.getElementById("button");
            button.type = 'submit';
        }
    }
</script>

</body>
</html>